import React from 'react';

import { Carousel } from 'antd-mobile';

import { getSwipers } from '../../request/index'

const url = 'http://115.159.87.220:8080'

export default class Index extends React.Component {
  state = {
    swipers: [],
    flag: false,
  }
  // 获取轮播图数据
  async getSwipersList() {
    const res = await getSwipers()
    this.setState(_ => {
      return {
        swipers: res.data.body,
        flag: true
      }
    })
  }
  // 封装渲染轮播图方法
  renderSwiper() {
    return (
      this.state.flag && <Carousel
        autoplay={true}
        infinite // 是否循环播放
      //  beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)} // 切换面板前的回调
       // afterChange={index => console.log('slide to', index)} // 切换面板后的回调
      >
        {this.state.swipers.map(item => (
          <a
            key={item.id}
            href="http://www.alipay.com"
            style={{ display: 'inline-block', width: '100%' }}
          >
            <img
              src={`${url}${item.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              /* 根据窗口大小改变图片大小
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }} */
            />
          </a>
        ))}
      </Carousel>
    )
  }
  componentDidMount() {
    this.getSwipersList()
  }
  render() {
    return (
        <div className="index">
          {this.renderSwiper()}
        </div>
    );
  }
}